<template>
  <div style="padding-right: 20%">
    <el-form :model="formData" label-position="right" label-width="200px">
<!--      <el-form-item label="单位名称:">-->
<!--        <div>{{formData.cName}}</div>-->
<!--        <el-input v-model="" readonly placeholder="请输入" />-->
<!--      </el-form-item>-->

<!--      <el-form-item label="会员级别：">-->
<!--        <el-select v-model="formData.applyStatus" disabled placeholder="请选择">-->
<!--          <el-option-->
<!--            v-for="item in options"-->
<!--            :key="item.ID"-->
<!--            :label="item.name"-->
<!--            :value="item.ID"-->
<!--          />-->
<!--        </el-select>-->
<!--        <div v-for="item in options" v-if="item.ID == formData.applyStatus">-->
<!--          {{ item.name }}-->
<!--        </div>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="账号ID">-->
<!--        <el-input v-model="formData.ID" readonly />-->
<!--      <div>{{formData.ID}}</div>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="地区:">-->
<!--        <div>{{formData.area}}</div>-->
<!--        <el-input v-model="formData.area" readonly clearable placeholder="请输入" />-->
<!--      </el-form-item>-->


      <el-divider  content-position="left">主体信息</el-divider>
      <el-form-item label="单位名称:">
        <el-input v-model="formData.name"  placeholder="请输入" />
      </el-form-item>
      <el-form-item label="证件类型:">
          <el-select v-model="formData.cardType" placeholder="请选择">
              <el-option
                      v-for="item in CCardType"
                      :key="item"
                      :label="item"
                      :value="item"
              />
          </el-select>
      </el-form-item>
      <el-form-item label="经营期限至:">
        <el-input v-model="formData.cLength" clearable placeholder="请输入" />
      </el-form-item>

      <el-form-item label="单位性质:">
          <el-select v-model="formData.cType" placeholder="请选择">
          <el-option
                  v-for="item in cTypeOption"
                  :key="item"
                  :label="item"
                  :value="item"
          />
      </el-select>


      </el-form-item>
      <el-form-item label="组织机构代码:">
        <el-input v-model="formData.cCard" clearable placeholder="请输入" />
      </el-form-item>
<!--      <el-form-item label="证件地区:">&lt;!&ndash;省市区-&ndash;&gt;-->
<!--        <el-input v-model="formData.area" readonly clearable placeholder="请输入" />-->
<!--      </el-form-item>-->
      <el-form-item label="证件地址:">
        <el-input v-model="formData.cAddress" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="通讯地址:">
            <el-input v-model="formData.cArea" clearable placeholder="请输入" />
      </el-form-item>
<!--      <el-divider content-position="left">业务信息</el-divider>-->
<!--      <el-form-item label="主营行业:">-->
<!--          <el-select @change="changeCWork" v-model="formData.cWork">-->
<!--                  <el-option-->
<!--                          v-for="item in CTypeslistApi"-->
<!--                          :key="item.ID"-->
<!--                          :label="item.name"-->
<!--                          :value="item.ID"-->
<!--                  />-->

<!--          </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="主营产品/业务:">-->
<!--          <el-select v-model="formData.cProduct">-->
<!--              <el-option-->
<!--                      v-for="item in CProductList"-->
<!--                      :key="item.ID"-->
<!--                      :label="item.name"-->
<!--                      :value="item.ID"-->
<!--              />-->

<!--          </el-select>-->
<!--     <el-input v-model="formData.cProduct" clearable placeholder="请输入" />-->
<!--      </el-form-item>-->
      <el-form-item label="企业网址:">
        <el-input v-model="formData.cWeb" clearable placeholder="请输入" />
      </el-form-item>

<!--      <el-divider content-position="left">联系信息</el-divider>-->
<!--      <el-form-item label="所在地:">-->
<!--        <el-input v-model="formData.cArea" clearable placeholder="请输入" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="街道地址:">-->
<!--        <el-input v-model="formData.cStreet" clearable placeholder="请输入" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="联系电话:">-->
<!--        <el-input v-model="formData.cPhone" clearable placeholder="请输入" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="传真号码">-->
<!--        <el-input v-model="formData.cSend" clearable placeholder="请输入" />-->
<!--      </el-form-item>-->

      <el-divider content-position="left">法人/被授权委托人信息</el-divider>
      <el-form-item label="法人/被委托人姓名:">
        <el-input v-model="formData.clientName" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="法人/被委托人证件类型:">
          <el-select v-model="formData.clientType">
              <el-option
                      v-for="item in ClientType"
                      :key="item"
                      :label="item"
                      :value="item"
              />

          </el-select>
<!--        <el-input v-model="formData.clientType" clearable placeholder="请输入" />-->
      </el-form-item>

      <el-form-item label="法人/被委托人证件号码:">
        <el-input v-model="formData.clientCardNumber" clearable placeholder="请输入" />
      </el-form-item>

      <el-form-item label="法人/被委托人手机号:">
        <el-input v-model="formData.clientPhone" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="法人/被委托人应急手机号:">
        <el-input v-model="formData.clientForPhone" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="法人/被委托人电子邮箱:">
        <el-input v-model="formData.clientMail" clearable placeholder="请输入" />
      </el-form-item>

      <el-divider content-position="left">纸质材料</el-divider>

      <el-form-item label="营业执照或律师执照:">
        <Upload v-model="formData.license" />
      </el-form-item>

      <el-form-item label="法人身份证照片:">
        <Upload v-model="formData.legalCard" />
      </el-form-item>
      <el-form-item label="法人/被委托人身份证照片:">
        <Upload v-model="formData.clientCard" />
      </el-form-item>
      <el-form-item label="被授权委托授权书:">
        <Upload v-model="formData.clientBook" />
      </el-form-item>
      <el-form-item label="会员协议书:">
        <Upload v-model="formData.protoAgree" />
      </el-form-item>


      <el-divider content-position="left">账号信息</el-divider>

      <el-form-item label="名称:">
        <el-input v-model="formData.name" clearable placeholder="请输入" />
      </el-form-item>

      <el-form-item label="密码:">
        <el-input v-model="formData.password" clearable placeholder="请输入" />
      </el-form-item>

      <el-form-item label="登陆手机号:">
        <el-input v-model="formData.phone" clearable placeholder="请输入" />
      </el-form-item>

      <el-form-item label="会员级别：">
        <el-select v-model="formData.applyStatus" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.ID"
            :label="item.name"
            :value="item.ID"
          />
        </el-select>

      </el-form-item>
        <el-form-item v-if="formData.ID" label="注册时间:">
            <span>{{ formData.CreatedAt|formatDate }}</span>
        </el-form-item>
        <el-form-item label="后台操作者审核上传缴费图片:">
            <Upload v-model="formData.mpayPic" />
        </el-form-item>
        <el-form-item label="会员费缴费凭证:">
            <Upload v-model="formData.dpayPic" />
        </el-form-item>

        <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button type="primary" @click="back">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {createCTypes, deleteCTypes, deleteCTypesByIds, findCTypes, getCTypesList, updateCTypes} from "@/api/cTypes"; //  此处请自行替换地址
import { getConfig } from  '@/api/baseConfig'
import { formatTimeToStr } from '@/utils/date'
import Upload from '@/components/upload/image'
import {
  createUsers,
  updateUsers,
  findUsers
} from '@/api/users' //  此处请自行替换地址
import infoList from '@/mixins/infoList'
import {
  createUserLevel,
  deleteUserLevel,
  deleteUserLevelByIds,
  updateUserLevel,
  findUserLevel,
  getUserLevelList
} from '@/api/userLevel' //  此处请自行替换地址
export default {
  components: {
    Upload
  },
  filters: {
    formatDate: function(time) {
      if (time != null && time != '') {
        var date = new Date(time)
        return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
      } else {
        return ''
      }
    }
  },
  mixins: [infoList],
  data() {
    return {
      ClientType:[],
      CProductList:[],
      CTypeslistApi: [],
      CCardType:[],
      cTypeOption : [],
      options: [],
      type: '',
      formData: {
        applyStatus: 0,
        // area: '',
        cAddress: '',
        cArea: '',
        cCard: '',
        cLength: '',
        cName: '',
        cPhone: '',
        cProduct: '',
        cSend: '',
        cStreet: '',
        cType: 0,
        cWeb: '',
        cWork: '',
        cardType: '',
        clientBook: '',
        clientCard: '',
        clientCardNumber: '',
        clientForPhone: '',
        clientMail: '',
        clientName: '',
        clientPhone: '',
        clientType: '',
        doneUser: 0,
        dpayPic: '',
        legalCard: '',
        license: '',
        mpayPic: '',
        name: '',
        password: '',
        phone: '',
        protoAgree: ''

      }
    }
  },
  async created() {

    // 建议通过url传参获取目标数据ID 调用 find方法进行查询数据操作 从而决定本页面是create还是update 以下为id作为url参数示例
    if (this.$route.query.id) {
      const res = await findUsers({ ID: this.$route.query.id })
      if (res.code == 0) {
        this.formData = res.data.reusers
        this.type = 'update'
      }
      var options = await getUserLevelList()
      this.options = options['data']['list']

    } else {
      this.type = 'create'
    }
      const ret = await getConfig()
      this.cTypeOption = ret['data']['c_type']
      this.CCardType  = ret['data']['c_note_type']
      const Cworks = await getCTypesList()
      this.CTypeslistApi  = Cworks['data']['list']
      var that = this
      for(var i = 0;i<this.CTypeslistApi.length;i++){
          if(that.formData.cWork == that.CTypeslistApi[i].ID){
              that.CProductList = this.CTypeslistApi[i].c_types
          }
      }
      this.ClientType = ret['data']['client_type']
      console.log(this.ClientType)
  },
  methods: {
    async changeCWork(){
        var that = this
        for(var i = 0;i<this.CTypeslistApi.length;i++){
            if(that.formData.cWork == that.CTypeslistApi[i].ID){
                // console.log(this.CTypeslistApi[i])
                that.CProductList = this.CTypeslistApi[i].c_types
            }
        }
        that.formData.cProduct = 0
        console.log(that.CProductList)
    },
    async save() {
      let res
      switch (this.type) {
        case 'create':
          res = await createUsers(this.formData)
          break
        case 'update':
          res = await updateUsers(this.formData)
          break
        default:
          res = await createUsers(this.formData)
          break
      }
      if (res.code == 0) {
        this.$message({
          type: 'success',
          message: '创建/更改成功'
        })
      }
    },
    back() {
      this.$router.go(-1)
    }
  }
}
</script>

<style>
    .el-divider__text{
        font-size: 18px;
    }
</style>
